﻿@{
    ViewBag.Title = "Quản lý - Thẻ du lịch";
    Layout = "~/Views/Shared/_CpanelLayout.cshtml";
}
<script type="text/javascript">
    $(document).ready(function () {
        $(".active").removeClass("active");
        $("li[rel=rel-card]").parent().parent().css("display", "block");
        $("li[rel=rel-card]").parent().parent().prev().addClass("active");
        $("li[rel=rel-card]").addClass("active");
        $("li[rel=rel-travelcard]").addClass("active");
    });
    </script>
<script type="text/javascript">
     $(document).ready(function () {
       
         var url = "/TravelCard/getTravelCard";
         var theme = "arctic";
         var getAdapter = function () {
             var source = {
                 datatype: "json",
                 datafields: [
                                    { name: 'CardID', type: 'int' },
                                    { name: 'CardName', type: 'string' },
                                    { name: 'CardImage', type: 'string' },
                                    { name: 'CompanyImg', type: 'string' },
                                    { name: 'FlagImage', type: 'string' },
                                    { name: 'Cost', type: 'float' },
                                    { name: 'Interest', type: 'float' },
                                    { name: 'Display', type: 'bool' },
                 ],
                 id: 'CardID',
                 url: url
             };
             var dataAdapter = new $.jqx.dataAdapter(source);
             return dataAdapter;
         };
         var imagerenderer = function (row, datafield, value) {
             return '<img style="margin:10px;10px;10px;10px;height:50px;" height="50" width="100" src="/content/upload/images/' + value + '"/>';
         }
         var imagerenderer_company = function (row, datafield, value) {
             return '<img style="margin:10px;10px;10px;10px;height:50px;" height="50" width="150" src="/content/upload/images/' + value + '"/>';
         }
         var flagimage = function (row, datafield, value) {
             return '<img style="margin-left: 38px;margin-top: 23px;width: auto;" height="25" width="40" src="/content/images/' + value + '"/>';
         }
         var getLocalization = getlocalizationobj();
         $("#grid_news").jqxGrid({
             width: '100%',
             source: getAdapter(),
             rowsheight: 70,
             theme: theme,
             autoheight: true,
             pageable: true,
             sortable: true,
             pagesize: 10,
             showfilterrow: true,
             enabletooltips: true,
             autoshowfiltericon: true,
             selectionmode: 'rowsextended',
             filterable: true,
             localization: getLocalization,
             showtoolbar: true,
             altrows: true,
             rendertoolbar: function (toolbar) {
                 // appends buttons to the status bar.
                 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                 var searchButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='/Content/images/search.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Tìm kiếm</span></div>");
                 var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='/Content/images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Thêm</span></div>");
                 var editButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='/Content/images/edit.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Cập nhật</span></div>");
                 var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='/Content/images/close.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Xóa</span></div>");
                 var deletefilterButton = $("<div id='clearfilteringbutton' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='/Content/images/filter_delete.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Bỏ lọc dữ liệu</span></div>");
                 var reloadButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='/Content/images/refresh.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Tải lại</span></div>");
                 container.append(addButton);
                 container.append(editButton);
                 container.append(deleteButton);
                 container.append(deletefilterButton);
                 container.append(reloadButton);
                 container.append(searchButton);
                 toolbar.append(container);

                 addButton.jqxButton({ theme: theme, width: 80, height: 20 });
                 editButton.jqxButton({ theme: theme, width: 100, height: 20 });
                 deleteButton.jqxButton({ theme: theme, width: 80, height: 20 });
                 searchButton.jqxButton({ theme: theme, width: 100, height: 20 });
                 reloadButton.jqxButton({ theme: theme, width: 80, height: 20 });
                 deletefilterButton.jqxButton({ theme: theme, width: 130, height: 20 });
                 // search for a record.
                 addButton.click(function (event) {
                     window.location = "/TravelCard/InsertCard/"
                 });
                 searchButton.click(function (event) {
                     var offset = $("#grid_news").offset();
                     $("#jqxwindow").jqxWindow('open');
                     $("#jqxwindow").jqxWindow('move', offset.left + 30, offset.top + 30);
                 });
                 reloadButton.click(function (event) {
                     $("#grid_news").jqxGrid({ source: getAdapter() });
                 });
                 // delete selected row.
                 deleteButton.click(function (event) {
                     var selectedrowindex = $("#grid_news").jqxGrid('getselectedrowindex');
                     var rowscount = $("#grid_news").jqxGrid('getdatainformation').rowscount;
                     var id = $("#grid_news").jqxGrid('getrowid', selectedrowindex);
                     if (selectedrowindex >= 0) {
                         var comfim = confirm("Bạn có thật sự muốn xóa?");
                         if (comfim) {
                             var dataRecord = $("#grid_news").jqxGrid('getrowdata', selectedrowindex);
                             $.ajax({
                                 type: "POST",
                                 url: "/Card/DeleteCard",
                                 datatype: "Json",
                                 data: { CardID: dataRecord.CardID },
                                 success: function (result) {
                                     if (result["Status"] == "OK") {
                                         alert("Xóa thành công");
                                         $("#grid_news").jqxGrid('deleterow', id);
                                     }
                                     else {

                                         alert("Xóa thất bại");
                                     }
                                 }
                             });
                         }

                     }
                     else {
                         alert("Chọn dữ liệu cần xóa.");
                     }
                 });
                 editButton.click(function (event) {
                     var selectedrowindex = $("#grid_news").jqxGrid('getselectedrowindex');
                     var rowscount = $("#grid_news").jqxGrid('getdatainformation').rowscount;
                     var id = $("#grid_news").jqxGrid('getrowid', selectedrowindex);
                     var dataRecord = $("#grid_news").jqxGrid('getrowdata', selectedrowindex);
                     if (selectedrowindex >= 0) {
                         location = "/TravelCard/UpdateCard/" + dataRecord.CardID;
                     }
                     else {
                         alert("Chọn dữ liệu cần sửa.");
                     }
                 });
             },
             columns: [
             { text: 'ID', datafield: 'CardID', filtertype: 'number', width: 55 },
            { text: 'Ngôn ngữ', datafield: 'FlagImage', sortable: false, filterable: false, width: 100, height: 45, cellsrenderer: flagimage },
            { text: 'Logo', datafield: 'CompanyImg', width: 200, filtertype: 'checkedlist', width: 170, height: 70, cellsrenderer: imagerenderer_company },
            { text: 'Hình ảnh', datafield: 'CardImage', filterable: false, width: 120, height: 70, cellsrenderer: imagerenderer },
            { text: 'Tên thẻ', datafield: 'CardName', filtertype: 'textbox' },
            { text: 'Lãi suất', datafield: 'Interest', width: 100, cellsformat: 'p2', filtertype: 'number' },
            { text: 'Phí năm', datafield: 'Cost', width: 100, cellsformat: 'd', filtertype: 'number' },
            { text: 'Hiển thị', columntype: 'checkbox', filtertype: 'bool', width: 100, datafield: 'Display' }

             ]
         });
         // create jqxWindow.
         $("#jqxwindow").jqxWindow({ theme: theme, resizable: false, autoOpen: false, width: 210, height: 180 });
         // create find and clear buttons.
         $("#findButton").jqxButton({ theme: theme, width: 70, });
         $("#clearButton").jqxButton({ theme: theme, width: 70, });

         // create dropdownlist.
         $("#dropdownlist").jqxDropDownList({
             theme: theme,
             autoDropDownHeight: true, selectedIndex: 0, width: 200, height: 23,
             source: [
                 'ID', 'Tên'
             ]
         });

         $("#inputField").addClass('jqx-input-' + theme);
         // clear filters.
         $("#clearButton").click(function () {
             $("#grid_news").jqxGrid('clearfilters');
         });
         // find records that match a criteria.
         $("#findButton").click(function () {
             $("#grid_news").jqxGrid('clearfilters');
             var searchColumnIndex = $("#dropdownlist").jqxDropDownList('selectedIndex');
             var datafield = "";
             switch (searchColumnIndex) {
                 case 0:
                     datafield = "CardID";
                     break;
                 case 1:
                     datafield = "CardName";
                     break;
             }
             var searchText = $("#inputField").val();
             var filtergroup = new $.jqx.filter();
             var filter_or_operator = 1;
             var filtervalue = searchText;
             var filtercondition = 'contains';
             var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
             filtergroup.addfilter(filter_or_operator, filter);
             $("#grid_news").jqxGrid('addfilter', datafield, filtergroup);
             // apply the filters.
             $("#grid_news").jqxGrid('applyfilters');
         });
         $('#clearfilteringbutton').jqxButton({ height: 25, theme: theme, });
         $('#clearfilteringbutton').click(function () {
             $("#grid_news").jqxGrid('clearfilters');
         });
     });

</script>
<div class="cbread_crumb">
    <ul class="breadcrumb">
        <li><a class="glyphicons home" href="/Cpanel"><i></i>Control panel</a></li>
        <li class="divider"></li>
        <li class="lastli">Thẻ du lịch</li>
    </ul>
</div>
<div class="separator"></div>
<div class="content-module-heading cf">

   <div class="heading-buttons">
	<h3 class="glyphicons credit_card"><i></i> Thẻ du lịch</h3>
	<div class="buttons pull-right">
		<a href="/TravelCard/InsertCard" class="btn btn-primary btn-icon glyphicons circle_plus"><i></i> Thêm</a>
	</div>
	<div class="clearfix"></div>
</div>
    <div class="separator"></div>
 
</div>
<!-- end content-module-heading -->


<div class="innerLR">
    <div id="grid_news"></div>
   <div id="jqxwindow">
        <div>
            Tìm kiếm
        </div>
        <div style="overflow: hidden;">
            <div>
                Từ khóa:
            </div>
            <div style='margin-top: 5px;'>
                <input id='inputField' type="text" class="jqx-input" style="width: 200px; height: 23px;" />
            </div>
            <div style="margin-top: 7px; clear: both;">
                Tìm theo:
            </div>
            <div style='margin-top: 5px;'>
                <div id='dropdownlist'>
                </div>
            </div>
            <div>
                <input type="button" style='margin-top: 15px; margin-left: 50px; float: left;' value="Tìm" id="findButton" />
                <input type="button" style='margin-left: 5px; margin-top: 15px; float: left;' value="Làm mới" id="clearButton" />
            </div>
        </div>
    </div>
</div>
